import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
} from 'react-navigation'
import WelcomePage from '../page/WelcomePage'
import HomePage from '../page/HomePage'
import DetailPage from '../page/DetailPage'
import FetchDemoPage from '../page/FetchDemoPage'
import WebViewPage from '../page/WebViewPage'
import AsyncStorageDemoPage from '../page/AsyncStorageDemoPage'
import {connect} from 'react-redux'
import {createReactNavigationReduxMiddleware, reduxifyNavigator} from 'react-navigation-redux-helpers'
import AboutPage from "../page/about/AboutPage";
import AboutMePage from "../page/about/AboutMePage";

export const rootCom = 'Init'

const InitNavigator = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage,
        navigationOptions: {
            header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    }

})
const MainNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    },
    DetailPage: {
        screen: DetailPage,
        navigationOptions: {
            header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    },
    FetchDemoPage: {
        screen: FetchDemoPage,
        navigationOptions: {
            // header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    },
    AsyncStorageDemoPage: {
        screen: AsyncStorageDemoPage,
        navigationOptions:
            {
                // header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
            }
    },
    WebViewPage: {
        screen: WebViewPage,
        navigationOptions:
            {
                header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
            }
    },
    AboutPage: {
        screen: AboutPage,
        navigationOptions: {
            header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    },
    AboutMePage: {
        screen: AboutMePage,
        navigationOptions: {
            header: null, //header设为null, 可以将顶部标题隐藏，达到全屏显示的效果
        }
    },
})
export const RootNavigator = createAppContainer(createSwitchNavigator(
    {
        Init: InitNavigator,
        Main: MainNavigator,

    },
    {
        navigationOptions: {
            header: null
        }
    }
))

/**
 * 1.初始化react-navigation与redux的中间件
 * 该方法的一个很大的作用就是为reduxifyNavigation的key设置actionSubscribers(行为订阅)
 * 设置订阅者@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L29
 * 检测订阅者是否存在@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L97
 * @type {Middleware}
 */

export const middleware = createReactNavigationReduxMiddleware('root', state => state.nav)

/**
 * 2. 将导航器组件传递给 reduxifyNavigator函数,
 *      并返回一个将Navigation state 和 dispatch函数作为props的新组件
 *      注意：要在createReactNavigationRudexMiddleware之后执行
 */
const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root')

/**
 * State 和Props的映射关系
 */
const mapStateToProps = state => ({
    state: state.nav
})
/**
 * 3. 连接React组件与 Redux store
 */
export default connect(mapStateToProps)(AppWithNavigationState)
